<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我的姓名:{{ name }}</p>
        <p>我的年龄:{{ age  }}</p>
        <p>我的地址:{{ address }}</p>

        <script>
            // 约定好  我的元素放在 {{ }} 里边


            // 准备原始数据

            // 劫持原数据  

            // 解析劫持后的数据 

            // 对号入座  

            // 封装一个数据劫持的函数 

            function jx(options = {}){
                // 1.判断选择器在不在 
                if(!options.ele){
                    throw new Error('请传入选择器')
                }
                // 如果有选择器 找到这个元素
                const ele = document.querySelector(options.ele); 

                if(!ele){
                    throw new Error('没有这个选择器')
                }

                // 2.判断数据在不在

                if(!options.data){
                    throw new Error('请传入原数据')
                }

                // 3.劫持数据
                const _data = {}  // 用来存放劫持后的数据
                _data.origin = options.data; 
            // 把原始数据存起来
                for(let k in data){
                    Object.defineProperty(_data,k,{
                        get(){
                            return data[k];
                        },
                        set(val){
                            data[k] = val;
                            // 劫持后的数据发生变化 重新解析
                            // 劫持完以后做的事情
                            render_data();
                        }
                    })
                }

                return _data;
                
            }
            // 封装一个替换数据的函数 

            // {{name}}  => 张三
            // {{age}}   => 18
            // {{address}} => 北京
            function render_data(){
                // 
            }
        </script>

        <script>
        //     函数名({ele:'#box',
        //     data:{
        //         name:'张三',
        //         age:18,
        //         address:'北京'
        //     }
        // })
        </script>

    </div>
</body>
</html>